<script setup lang="ts">
import { defineEmits, defineExpose } from 'vue'
import { ElMessage, ElMessageBox, type FormRules } from 'element-plus'
import { reactive, ref } from 'vue'
import ApplyApi from '@/service/api/apply/apply'
const emit = defineEmits(['update'])

// 发布文章对话框控制
const updateDialogFormVisible = ref(false)
// 同意还是拒绝
const attitude = ref('')
//将open函数暴露给父组件，并初始化弹窗数据，如果使用父子传参传递信息，会有异步的问题
const open = (row: any, type: any) => {
  console.log(row, type)

  // 设置编辑文章类型时显示已有内容，即将弹窗表内容设为当前行的内容，当点击当前行的编辑按钮时触发
  updateDialogFormVisible.value = true
  attitude.value = type
  form.value = { ...row }
  const {
    projectDetail: { title: temp }
  } = row
  form.value.title = temp
}

defineExpose({
  open
})

// 添加初始化首页文章表单
const form = ref({
  title: '',
  reason: '',
  form_id: 0,
  status: 0,
  projectDetail: {
    people_num: 0
  }
})
// 表单标签宽度
const formLabelWidth = '100px'

const formRef = ref()

// 退出刷新弹窗
const handleBack = () => {
  updateDialogFormVisible.value = false
  // 清空表单
  if (formRef.value) {
    formRef.value.resetFields()
    formRef.value.clearValidate()
  }
  ElMessage.info('取消操作')
}

//确认审批
const confirm = async () => {
  attitude.value === 'approve' ? (form.value.status = 1) : (form.value.status = 2)
  await ApplyApi.approvalApply({
    form_id: form.value.form_id,
    reason: form.value.reason,
    status: form.value.status
  }).then(async (res) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg)
    } else {
      emit('update')
      updateDialogFormVisible.value = false
      ElMessage.success('审批成功')
      // 项目人满后提醒老师项目关闭
      const people_num = ref(0)
      await ApplyApi.getApplyList().then((res: any) => {
        res.data.list.forEach((item: any) => {
          if (item.form_id === form.value.form_id && item.status !== 0) {
            people_num.value++
          }
        })
        if (people_num.value === form.value.projectDetail.people_num) {
          ElMessageBox.confirm('改成员通过后，项目人满，将自动关闭项目', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        }
      })
    }
  })
}
</script>

<template>
  <el-dialog
    v-model="updateDialogFormVisible"
    :title="attitude == 'approve' ? '请给出通过该学员的原因' : '请给出拒绝该学员的原因'"
    width="40%"
  >
    <el-form :model="form" ref="formRef">
      <el-form-item label="标题" :label-width="formLabelWidth" required prop="title">
        <el-input v-model="form.title" autocomplete="off" disabled />
      </el-form-item>
      <el-form-item
        :label="attitude == 'approve' ? '通过留言' : '拒绝原因'"
        :label-width="formLabelWidth"
        prop="content"
      >
        <el-input v-model="form.reason" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleBack">取消</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped></style>
